<template>
	<view class="">
		<view class="top"></view>
		<view class="main">
			<view class="title">
				请填写来访人信息
			</view>
			<view class="list">
				<view class="list-view">
					来访人姓名：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="请输入姓名" :value="allsubit.ad_name" v-model="allsubit.ad_name" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					电话：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="number" placeholder="电话" :value="allsubit.ad_phone" v-model="allsubit.ad_phone" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					身份证：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="身份证" :value="allsubit.ad_sfz" v-model="allsubit.ad_sfz" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					来访时间：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="来访时间" :value="allsubit.str_ad_time" @click="peopletime()"
						readonly="readonly" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					事由：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="事由" :value="allsubit.ad_reason" v-model="allsubit.ad_reason" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					访问教职工：
				</view>
				<view style="padding-right: 88rpx;display: flex;">
					<!-- <u-input v-model="allsubit.ad_teacher" type="text" @searchText='searchText' /> -->
					<input type="text" placeholder="教职工" :value="allsubit.ad_teacher" v-model="allsubit.ad_teacher" />
					<u-icon name="search" color="#2979ff" size="28" @click="searchText()"></u-icon>
				</view>
				<u-select v-model="showselect" :list="list" @confirm="confirm" v-on:searchText='searchText'></u-select>
			</view>
			<view class="list">
				<view class="list-view" @click="test()">
					来访车牌
				</view>
				<view class="list-car">
					<view class="carNum" @click="carNum(1)" v-bind:class="{isNumClick: isNumone }" id='one'>{{form.one}}
					</view>
					<view class="carNum" @click="carNum(2)" v-bind:class="{isNumClick: isNumtwo }" id='two'>{{form.two}}
					</view>
					<view class="carNum" @click="carNum(3)" v-bind:class="{isNumClick: isNumthree }" id='three'>
						{{form.three}}
					</view>
					<view class="carNum" @click="carNum(4)" v-bind:class="{isNumClick: isNumfour }" id='four'>
						{{form.four}}
					</view>
					<view class="carNum" @click="carNum(5)" v-bind:class="{isNumClick: isNumfive }" id='five'>
						{{form.five}}
					</view>
					<view class="carNum" @click="carNum(6)" v-bind:class="{isNumClick: isNumsix }" id='six'>{{form.six}}
					</view>
					<view class="carNum" @click="carNum(7)" v-bind:class="{isNumClick: isNumseven }" id='seven'>
						{{form.seven}}
					</view>
					<view v-if="witchCar" class="carNum" @click="carNum(8)" v-bind:class="{isNumClick: isNumeight }"
						id='eight'>
						{{form.eight}}
					</view>
				</view>
			</view>
			<view class="list-last button-sp-area">
				<!-- <button type="primary" plain="true" style="height: 80%;margin-top: 0.5rem;" v-on:click="isName('油车')">切换油车</button> -->
				<button type="default" plain="true" style="font-size: small;border:none;"
					v-on:click="isName()">{{mainCarName}}</button>
			</view>
		</view>
		<view class="face">
			<view style="display: flex; flex-direction:column;margin-left: 1rem;" @click="takephoto()">
				<view style="margin-top:1rem;font-weight: 500;">
					请上传头像
				</view>
				<view style="font-size: small;color: #ababab;">
					提示：需正对手机，光线充足，背景简洁，人脸照片必须正面照
				</view>
			</view>
			<view class="">
				<view style="border: 1px solid black;width: 4rem;height: 4rem;margin-right: 1rem;margin-top: 0.5rem;"
					@click="takephoto()">
					<!-- <image src="../../static/t.jpg" style="width: 4rem;height: 4rem;" id="photo"></image> -->
					<image :src="modesrc" style="width: 4rem;height: 4rem;" id="image"></image>
				</view>
				<!-- <view class="" @click="transform()">
					点击旋转
				</view> -->
			</view>
		</view>
		<!-- <view class="face-2">
			<button type="default" plain="true" style="font-size: small;border:none"
				@click="transform()">点击旋转头像</button>
		</view> -->
		<!-- <view class="face-3">
			<button type="default" plain="true" style="font-size: small;border:none"
				@click="transform()">拍照</button>
			<button type="default" plain="true" style="font-size: small;border:none"
				@click="transform()">相册</button>
		</view> -->
		<view>
			<!-- <web-view src="../html/1.html"></web-view> -->
		</view>
		<!-- <canvas id='mycanvas' width="500" height="500" type='2d' canvas-id='mycanvas'></canvas> -->
		<canvas class="canvas-bg" canvas-id="firstCanvas" id="firstCanvas" style="opacity:0;position: fixed;"></canvas>
		<view class="bottom" @click="subit()" id="buttomName">
			{{subitName}}
		</view>
		<u-keyboard ref="uKeyboard" mode="car" :mask="false" v-model="show" @change="valChange"
			:safe-area-inset-bottom='true' @backspace="backspace">
		</u-keyboard>
		<u-picker mode="time" v-model="showtime" :params="params" @confirm="makeTime"></u-picker>
		<!-- <u-button @click="show = true">打开</u-button> -->
	</view>
</template>

<script>
	// import {
	// 	compressImage 
	// } from "'../../static/ajax.js"
	export default {
		data() {
			return {
				showimgs: false,
				subitName: '确认提交',
				mainCarName: '切换新能源车',
				witchCar: false,
				title: 'Hello',
				show: false,
				modesrc: '',
				form: {
					one: '',
					two: '',
					three: '',
					four: '',
					five: '',
					six: '',
					seven: '',
					eight: ''
				},
				select: '',
				isNumone: false,
				isNumtwo: false,
				isNumthree: false,
				isNumfour: false,
				isNumfive: false,
				isNumsix: false,
				isNumseven: false,
				isNumeight: false,
				list: [],
				showselect: false,
				allsubit: {
					ad_teacherId: '',
					ad_teacher: '',
					ad_phone: '',
					ad_name: '',
					str_ad_time: '',
					ad_sfz: '',
					ad_reason: '',
					ad_photo: ''
				},

				showtime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				transformDeg: 0
			}
		},
		onLoad: function(options) {
			// let that = this
			// uni.getStorage({
			//     key: 'jpg',
			//     success: function (res) {
			// 		that.modesrc = res.data
			//     }
			// });
			
			// const item = JSON.parse(decodeURIComponent(options.jpg));
			// that.modesrc = item
		},
		
		onUnload:function(){
			
			// uni.removeStorage({
			//     key: 'jpg',
			//     success: function (res) {
			//         console.log('success');
			//     }
			// });
		},
		methods: {
			searchText() {
				this.peoplef(this.allsubit.ad_teacher)
			},
			isName(name) {

				if (this.mainCarName === '切换新能源车') {
					this.mainCarName = '切换普通车'
					this.witchCar = true
					this.select = 1
					this.form = {
						one: '',
						two: '',
						three: '',
						four: '',
						five: '',
						six: '',
						seven: '',
						eight: ''
					}

					this.allfalse()
					this.isNumone = true
				} else {
					this.mainCarName = '切换新能源车'
					this.select = 1
					this.form = {
						one: '',
						two: '',
						three: '',
						four: '',
						five: '',
						six: '',
						seven: '',
						eight: ''
					}
					this.allfalse()
					this.isNumone = true

					this.form.eight = ''
					this.witchCar = false
				}
			},

			transform() {
				this.$data.transformDeg = this.$data.transformDeg + 90
				document.getElementById("image").style.transform = "rotate(" + this.$data.transformDeg + 'deg)';
				this.uploadImgVisitor()
				return;
			},

			uploadImgVisitor() {
				let that = this
				let s = this.$data.transformDeg % 360
				var context = uni.createCanvasContext('firstCanvas')
				switch (s) {
					case 0:
						context.drawImage(this.$data.modesrc, 0, 0, 300, 300);
						context.draw()
						break;
					case 90:
						context.translate(300, 0);
						context.rotate(Math.PI / 2);
						context.drawImage(this.$data.modesrc, 0, 0, 300, 300);
						context.draw()
						break;
					case 180:
						context.translate(300, 300);
						context.rotate(Math.PI);
						context.drawImage(this.$data.modesrc, 0, 0, 300, 300);
						context.draw()
						break;
					case 270:
						context.translate(0, 300);
						context.rotate(Math.PI / 2 * 3);
						context.drawImage(this.$data.modesrc, 0, 0, 300, 300);
						context.draw()
						break;
				}
				// setTimeout(() => {    that.read()}, 20)
			},


			read() {
				let that = this
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 300,
					height: 300,
					destWidth: 300,
					destHeight: 300,
					canvasId: 'firstCanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log(res.tempFilePath)

						uni.uploadFile({
							url: '/api/v1/schoolsafety/upload/uploadImgVisitor', // 后端api接口
							filePath: res.tempFilePath, // uni.chooseImage函数调用后获取的本地文件路劲
							name: 'file', //后端通过'file'获取上传的文件对象
							// header:{
							// 	 "Content-Security-Policy": "upgrade-insecure-requests"
							// },
							success: (res) => {
								let msg = JSON.parse(res.data)
								if (msg.code === 200) {
									that.allsubit.ad_photo = msg.data.src
									uni.showToast({
										icon: 'none',
										title: '图片上传成功'
									})
								}
							},
							fail: (err) => {
								uni.showToast({
									icon: 'none',
									title: '图片上传失败'
								})
							}
						});
					}
				})
			},

			takephoto() {
				// uni.redirectTo({
				//     url: './cana'
				// });
				// uni.navigateTo({
				// 	url: './cana'
				// })
				
				// this.choiceImg()
				let that = this
				uni.chooseImage({
					count: 1, //默认9

					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有

					sourceType: ['album'], //从相册选择

					success: function(res) {
						// document.getElementById('photo').src = res.tempFilePaths
						// that.$data.modesrc = res.tempFilePaths[0]
						uni.navigateTo({
							url: './cana?jpg=' + res.tempFilePaths
						})
						// let deg = 360 - that.transformDeg
						// document.getElementById("image").style.transform = "rotate(" + deg + 'deg)';
						// that.transformDeg = 0
						// console.log(deg)

						// uni.uploadFile({
						// 	url: '/api/v1/schoolsafety/upload/uploadImgVisitor', // 后端api接口
						// 	filePath: res.tempFilePaths[0], // uni.chooseImage函数调用后获取的本地文件路劲
						// 	name: 'file', //后端通过'file'获取上传的文件对象
						// 	// header:{
						// 	// 	 "Content-Security-Policy": "upgrade-insecure-requests"
						// 	// },
						// 	success: (res) => {
						// 		let msg = JSON.parse(res.data)
						// 		if (msg.code === 200) {
						// 			that.allsubit.ad_photo = msg.data.src
						// 		}
						// 	},
						// 	fail: (err) => {
						// 		uni.showToast({
						// 			icon: 'none',
						// 			title: '上传失败'
						// 		})
						// 	}
						// });
					}

				});
			},
			
			choiceImg(){
			var that = this;
						let maxWidth = 500; //压缩图片最大宽度
						let Orientation = 1;
						uni.chooseImage({
							count: 1, // 能够选择的图片数量
							sizeType: ['original', 'compressed'], // original: 原图, compressed: 压缩图, 默认二者都有
							sourceType: ['album'], // album: 从相册选择   camera: 相机拍照
							success: res => {
								let imgArr = res.tempFilePaths; // 所选择图片的临时路径数组
								//BlobUrl转blob数据
								console.log(imgArr)
								uni.showToast({
									icon: "none",
									title: "图片处理中..."
								})
								//blob数据转file
								this.objectURLToBlob(imgArr[0], function(blob) {
									let files = new window.File([blob], 'file.name', { type: 'file.type' });
									console.log('获取图片文件', files);
									EXIF.getData(files, async function() {
										let or = EXIF.getTag(this, '6'); //这个Orientation 就是我们判断需不需要旋转的值了，有1、3、6、8
										console.log(or);
										Orientation = or;
										var img = null;
										var canvas = null;
										await that.comprossImage(imgArr[0], maxWidth, function(e) {
											img = e.img;
											canvas = e.canvas;
										});
										let baseStr = '';
										//如果方向角不为1，都需要进行旋转
										baseStr = that.rotateImg(img, 'right', canvas);
				// 						switch (Orientation) {
				// 							case 6: //需要顺时针（向右）90度旋转
				// 								console.log('（向右）90度旋转');
				// 								baseStr = that.rotateImg(img, 'right', canvas);
				// 								break;
				// 							case 8: //需要逆时针（向左）90度旋转
				// 								console.log('向左）90度旋转');
				// 								baseStr = rotateImg(img, 'left', canvas);
				// 								break;
			 
				// 							case 3: //需要180度旋转 转两次
				// 								console.log('需要180度旋转');
				// 								baseStr = that.rotateImg(img, 'right', canvas, 2);
				// 								break;
				// 							default:
				// 								baseStr = that.rotateImg(img, '', canvas);
				// 								break;
				// 						}
									});
								});
							}
						});
			},
			
			dataURLtoFile: function(dataurl, filename) { 
				    var arr = dataurl.split(','),
				        mime = arr[0].match(/:(.*?);/)[1],
				        bstr = atob(arr[1]),
				        n = bstr.length,
				        u8arr = new Uint8Array(n);
				    while (n--) {
				        u8arr[n] = bstr.charCodeAt(n);
				    }
				    return new File([u8arr], filename, { type: mime });
				},
			
			// 2、1中使用到的将blob转化为file方法 和图片的压缩方法
			objectURLToBlob(url, callback) {
						var http = new XMLHttpRequest();
						http.open('GET', url, true);
						http.responseType = 'blob';
						http.onload = function(e) {
							if (this.status == 200 || this.status === 0) {
								callback(this.response);
							}
						};
						http.send();
					},
					async comprossImage(imgSrc, maxWidth, func) {
						if (!imgSrc) return 0;
						return new Promise((resolve, reject) => {
							uni.getImageInfo({
								src: imgSrc,
								success(res) {
									let img = new Image();
									img.src = res.path;
									console.log(img);
			 
									let canvas = document.createElement('canvas');
			 
									let obj = new Object();
									obj.img = img;
									obj.canvas = canvas;
									resolve(func(obj));
								}
							});
						});
					},
				// 3、图片的旋转处理
				rotateImg(img, direction, canvas, times = 1) {
							console.log('开始旋转');
							//最小与最大旋转方向，图片旋转4次后回到原方向
							var min_step = 0;
							var max_step = 3;
							if (img == null) return;
				 
							//img的高度和宽度不能在img元素隐藏后获取，否则会出错
							var height = img.height;
							var width = img.width;
							let maxWidth = 500;
							let canvasWidth = width; //图片原始长宽
							let canvasHeight = height;
							let base = canvasWidth / canvasHeight;
							console.log(maxWidth);
							if (canvasWidth > maxWidth) {
								canvasWidth = maxWidth;
								canvasHeight = Math.floor(canvasWidth / base);
							}
							width = canvasWidth;
							height = canvasHeight;
							var step = 0;
				 
							if (step == null) {
								step = min_step;
							}
				 
							if (direction == 'right') {
								step += times;
								//旋转到原位置，即超过最大值
								step > max_step && (step = min_step);
							} else if (direction == 'left') {
								step -= times;
								step < min_step && (step = max_step);
							} else {
								//不旋转
								step = 0;
							}
				 
							//旋转角度以弧度值为参数
							var degree = (step * 90 * Math.PI) / 180;
							var ctx = canvas.getContext('2d');
							// console.log(degree)
							// console.log(step)
							switch (step) {
								case 1:
									console.log('右旋转 90度');
									canvas.width = height;
									canvas.height = width;
									ctx.rotate(degree);
									ctx.drawImage(img, 0, -height, width, height);
									break;
								case 2:
									//console.log('旋转 180度')
									canvas.width = width;
									canvas.height = height;
									ctx.rotate(degree);
									ctx.drawImage(img, -width, -height, width, height);
									break;
								case 3:
									console.log('左旋转 90度');
									canvas.width = height;
									canvas.height = width;
									ctx.rotate(degree);
									ctx.drawImage(img, -width, 0, width, height);
									break;
								default:
									//不旋转
									canvas.width = width;
									canvas.height = height;
									ctx.drawImage(img, 0, 0, width, height);
									break;
							}
				 
							let baseStr = canvas.toDataURL('image/jpeg', 1);
							// console.log(baseStr)
							// return baseStr;
							// replace("data:image/jpeg;base64,", "")
				            // 将base64转化为blob文件进行图片上传，（考虑到转化后再上传耗费时间暂时没有使用，如果需要base64ToPath 方法可百度或者私信我）
							// base64ToPath(baseStr).then(tempPath => {
							// 	this.uploadBgImg(tempPath)
							// });
				            // 自定义上传请求
							console.log(baseStr)
							return baseStr
							// this.uploadBaseImg(baseStr);
						},

			carNum(n) {

				//页面往上滑动，防止键盘挡住输入框
				uni.pageScrollTo({
					scrollTop: 600,
					duration: 300
				});
				this.$data.show = true
				this.select = n
				switch (this.select) {
					case 7:
						this.allfalse()
						this.isNumseven = true
						break;
					case 8:
						this.allfalse()
						this.isNumeight = true
						break;
					case 1:
						this.allfalse()
						this.isNumone = true
						break;
					case 2:
						this.allfalse()
						this.isNumtwo = true
						break;
					case 3:
						this.allfalse()
						this.isNumthree = true
						break;
					case 4:
						this.allfalse()
						this.isNumfour = true
						break;
					case 5:
						this.allfalse()
						this.isNumfive = true
						break;
					case 6:
						this.allfalse()
						this.isNumsix = true
						break;
				}
			},

			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {

				let that = this
				switch (this.select) {
					case 7:
						this.allfalse()
						this.isNumseven = true
						this.form.seven = val
						break;
					case 8:
						this.allfalse()
						this.isNumeight = true
						this.form.eight = val
						break;
					case 1:
						this.allfalse()
						// this.isNumone = true
						this.isNumtwo = true
						this.form.one = val
						break;
					case 2:
						this.allfalse()
						this.isNumthree = true
						this.form.two = val
						break;
					case 3:
						this.allfalse()
						this.isNumfour = true
						this.form.three = val
						break;
					case 4:
						this.allfalse()
						this.isNumfive = true
						this.form.four = val
						break;
					case 5:
						this.allfalse()
						this.isNumsix = true
						this.form.five = val
						break;
					case 6:
						this.allfalse()
						this.isNumseven = true
						this.form.six = val
						break;
				}

				this.select = this.select + 1
				if (this.witchCar === true) {
					if (this.select > 8) {
						this.select = 8
					}
				} else {
					if (this.select > 7) {
						this.select = 7
					}
				}
			},

			allfalse() {
				this.isNumone = false
				this.isNumtwo = false
				this.isNumthree = false
				this.isNumfour = false
				this.isNumfive = false
				this.isNumsix = false
				this.isNumseven = false
				this.isNumeight = false
			},

			peoplef(val) {
				uni.hideKeyboard(); //隐藏软键盘
				let data = {
					page: 1,
					limit: 200,
					t_data: val,
					tj_id: 0
				}
				this.list = []
				let that = this
				uni.request({
					url: '/schoolsafety/getPageTeachersPc',
					data: data,
					success: (res) => {
						this.list = res.data.data
						for (let i = 0; i < res.data.data.length; i++) {
							this.list[i].value = this.list[i].t_id
							if (this.list[i].c_id != 0) {
								this.list[i].label = this.list[i].t_name + '--' + this.list[i].str_c_name
							} else {
								this.list[i].label = this.list[i].t_name
							}
							// if(res.data.data.length === i){
							// 	that.showselect = true
							// }
						}
						setTimeout(function() {
							that.showselect = true
						}, 100);

					}
				});
			},

			peopletime() {
				uni.hideKeyboard();
				this.showtime = true
			},

			confirm(e) {
				this.allsubit.ad_teacherId = e[0].value
				this.allsubit.ad_teacher = e[0].label
			},

			makeTime(e) {
				this.allsubit.str_ad_time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ":" + e.minute + ":" + e
					.second
			},

			//true有汉字，false没有汉字
			CheckChinese(obj, val) {
				var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
				if (reg.test(val)) {
					return true
				} else {
					//不包含汉字
					return false
				}
			},

			subit() {
				// this.subitName = '已提交成功'
				// var div = document.getElementById('buttomName');
				// div.setAttribute("class", "bottom-after");
				// // var div = document.getElementById('buttomName');
				// // div.setAttribute("class", "bottom-after");
				// return;
				if (this.subitName === '已提交成功') {
					return;
				}

				if (this.allsubit.ad_name === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名'
					})
					return;
				}

				if (this.allsubit.ad_phone === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入电话'
					})
					return;
				} else if (this.allsubit.ad_phone.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的电话'
					})
					return;
				}

				if (this.allsubit.ad_sfz === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入身份证'
					})
					return;
				} else if (this.allsubit.ad_sfz.length != 18) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的身份证'
					})
					return;
				}

				if (this.allsubit.ad_name === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名'
					})
					return;
				}

				if (this.allsubit.ad_reason === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入来访事由'
					})
					return;
				}

				if (this.allsubit.ad_teacher === '') {
					uni.showToast({
						icon: 'none',
						title: '请选择要访问的人员'
					})
					return;
				}



				let s =
					'{"ad_teacherId":15,"ad_teacher":"雷邦荣","ad_phone":"23456","ad_name":"2112","str_ad_time":"2021-09-27 17:09:56","ad_sfz":"1324658798","ad_reason":"1221","ad_carnumber":"浙2T8499"}'
				this.allsubit.ad_carnumber = this.form.one + this.form.two + this.form.three + this.form.four + this.form
					.five + this.form.six + this.form.seven + this.form.eight

				if (this.allsubit.ad_carnumber.length != 0) {
					//车牌正确性
					//true汉字
					// if (!this.CheckChinese('', this.allsubit.ad_carnumber.substr(0, 1))) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '请填写正确的车牌'
					// 	})
					// 	return
					// }
					// false
					// if (this.CheckChinese('', this.allsubit.ad_carnumber.split(this.allsubit.ad_carnumber.substr(0, 1))[
					// 		1])) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '请填写正确的车牌'
					// 	})
					// 	return
					// }

					if (this.allsubit.ad_carnumber.length > 8) {
						uni.showToast({
							icon: 'none',
							title: '请填写正确的车牌'
						})
						return
					}

					if (this.allsubit.ad_carnumber.length < 7) {
						uni.showToast({
							icon: 'none',
							title: '请填写正确的车牌'
						})
						return
					}

					if (this.allsubit.ad_carnumber.indexOf('O') != -1) {
						uni.showToast({
							icon: 'none',
							title: '车牌不能包含O'
						})
						return
					}

					if (this.allsubit.ad_carnumber.indexOf('I') != -1) {
						uni.showToast({
							icon: 'none',
							title: '车牌不能包含I'
						})
						return
					}
				}
				
				if(this.$data.modesrc === ''){
					uni.showToast({
						icon: 'none',
						title: '请上传照片I'
					})
					return
				}

				// console.log(this.allsubit.ad_carnumber.split(this.allsubit.ad_carnumber.substr(0, 1))[1])
				// console.log(this.allsubit.ad_carnumber.substr(0, 1))
				// console.log(this.allsubit.ad_carnumber)
				// // this.CheckChinese('','asxasxsa')
				// // return
				// console.log(this.allsubit)
				let that = this
				// uni.canvasToTempFilePath({
				// 	x: 0,
				// 	y: 0,
				// 	width: 400,
				// 	height: 300,
				// 	destWidth: 400,
				// 	destHeight: 300,
				// 	canvasId: 'firstCanvas',
				// 	fileType:'jpg',
					// success: function(res) {
						// console.log(res.tempFilePath)
						uni.uploadFile({
							url: '/schoolsafety/upload/uploadImgVisitor', // 后端api接口
							filePath: that.$data.modesrc, // uni.chooseImage函数调用后获取的本地文件路劲
							name: 'file', //后端通过'file'获取上传的文件对象
							// header:{
							// 	 "Content-Security-Policy": "upgrade-insecure-requests"
							// },
							success: (res) => {
								let msg = JSON.parse(res.data)
								if (msg.code === 200) {
									that.allsubit.ad_photo = msg.data.src
									uni.showToast({
										icon: 'none',
										title: '图片上传成功'
									})

									//图片上传成功后上传数据
									uni.request({
										method: 'post',
										url: '/schoolsafety/addAccessRecordType',
										data: that.allsubit,
										header: {
											'content-type': 'application/json'
										},
										success: (res) => {
											console.log(res)
											if (res.statusCode == 200) {
												uni.showToast({
													icon: 'none',
													title: '提交成功'
												})
												that.subitName = '已提交成功'
												var div = document.getElementById(
													'buttomName');
												div.setAttribute("class",
													"bottom-after");
											} else {
												uni.showToast({
													icon: 'none',
													title: '提交失败'
												})
											}
										}
									});
								}
							},
							fail: (err) => {
								alert('err')
								uni.showToast({
									icon: 'none',
									title: '图片上传失败'
								})
							}
						});
					// },
				// })


			},

			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.witchCar === true) {
					if (this.select === 8) {
						if (this.form.eight === '') {
							this.select = this.select - 1
						} else {
							this.select = 8
						}
					} else {
						this.select = this.select - 1
					}
				} else {
					if (this.select === 7) {
						if (this.form.seven === '') {
							this.select = this.select - 1
						} else {
							this.select = 7
						}
					} else {
						this.select = this.select - 1
					}
				}

				switch (this.select) {
					case 7:
						this.allfalse()
						this.isNumseven = true
						// this.isNumseven = true
						this.form.seven = ''
						break;
					case 8:
						this.allfalse()
						this.isNumeight = true
						// this.isNumseven = true
						this.form.eight = ''
						break;
					case 1:
						this.allfalse()
						this.isNumone = true

						this.form.one = ''
						break;
					case 2:
						this.allfalse()
						this.isNumtwo = true

						this.form.two = ''
						break;
					case 3:
						this.allfalse()
						this.isNumthree = true

						this.form.three = ''
						break;
					case 4:
						this.allfalse()
						this.isNumfour = true

						this.form.four = ''
						break;
					case 5:
						this.allfalse()
						this.isNumfive = true

						this.form.five = ''
						break;
					case 6:
						this.allfalse()
						this.isNumsix = true

						this.form.six = ''
						break;
				}
				if (this.select < 1) {
					this.select = 1
				}
			}
		}
	}
</script>

<style>
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.top {
		width: 100%;
		height: 12rem;
		background-color: #4b97e2;
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}

	.main {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: -7rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.title {
		/* position: relative; */
		padding-top: 4rem;
		text-align: center;
		font-size: x-large;
		font-weight: 400;
	}

	.list {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-last {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		/* display: flex; */
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		float: right;
		/* border-bottom: 1px solid #ABB1BA; */
		height: 1rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-view {
		width: 250rpx;
		white-space: nowrap;
	}

	.list-car {
		display: flex;
		justify-content: space-between;
	}

	input {
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
		font-size: medium;
		border: 0;
		outline: none;
		background-color: rgba(0, 0, 0, 0);
		width: 40vw;
	}

	.face {
		background-color: white;
		margin: 0 auto;
		margin-top: 1rem;
		height: 5rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
		display: flex;
		justify-content: space-between;
	}

	.face-2 {
		background-color: white;
		/* margin: 0 auto; */
		margin-left: 35vw;
		margin-top: 1rem;
		height: 3rem;
		width: 88vw;
		/* box-shadow: 0px 0px 0.625rem #eaeaea; */
		z-index: 1000;
		border-radius: 1.625rem;
		display: flex;
		justify-content: space-between;
	}

	.face-3 {
		background-color: white;
		/* margin: 0 auto; */
		/* margin-left: 35vw; */
		margin-top: 1rem;
		height: 3rem;
		width: 88vw;
		/* box-shadow: 0px 0px 0.625rem #eaeaea; */
		z-index: 1000;
		border-radius: 1.625rem;
		display: flex;
		justify-content: space-between;
	}

	.canvas-bg {
		/* margin: 0 auto; */
		/* margin-top: 1rem; */
		height: 88vw;
		width: 88vw;
		float: left;
		/* box-shadow: 0px 0px 0.625rem #55ffff; */
		/* z-index: 1000; */
		/* border-radius: 1.625rem; */
		/* display: flex; */
		/* justify-content: space-between; */
	}

	.carNum {
		border: 1px solid black;
		width: 1.8rem;
		height: 2.6rem;
		margin-top: 0.2rem;
		text-align: center;
		line-height: 2.6rem;
	}

	/* .carNum:hover {
		border: 1px solid red;
	} */

	.isNumClick {
		border: 1px solid red;
	}

	/* .carNum:hover ~ #two { background-color: yellow; } */


	.bottom {
		margin: 0 auto;
		margin-top: 5rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		background-color: #4b97e2;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
	}

	.bottom-after {
		margin: 0 auto;
		margin-top: 7rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
		background-color: #b4bdcb;
	}
</style>
